{% extends "admin/layout.html" %}
{% block title %}
    <title>创建文章</title>
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='backend/lib/editmd/css/editormd.css') }}"/>
{% endblock %}
{% block main %}
    {% with messages = get_flashed_messages(with_categories=True, category_filter=('success')) %}
    {% if messages %}
        <ul>
            {% for (category, message) in messages %}
            <li>{{ message }}||{{ category }}</li>
            {% endfor %}
        </ul>
    {% endif %}
    {% endwith %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">文章编辑</h1>
    </div>
    <form action="{{ url_for('admin.admin_post') }}" method="POST">
        {{ form.hidden_tag() }}
        <p><a href="{{ url_for('admin.admin_post_list') }}" class="btn btn-lg btn-light">返回列表</a>&nbsp;&nbsp;<!--<button
                class="btn btn-lg btn-dark" type="submit">提交博客
        </button>-->{{ form.submit }}
        </p>
        <div class="col-md-12">
            <div class="form-group">
                {{ form.title.label }}
                {{ form.title }}
{#                <input type="text" class="form-control" id="exampleFormControlInput1" required name="title">#}
                {% for error in form.title.errors %}
                <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.desc.label }}
                {{ form.desc }}
{#                <label for="exampleFormControlTextarea1">文章概述</label>#}
{#                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required name="desc"></textarea>#}
                {% for error in form.desc.errors %}
                <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.cover.label }}
                {{ form.cover }}
                {% for error in form.cover.errors %}
                <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            <div class="form-group">
                {{ form.category.label }}
{#                <label for="exampleFormControlSelect1">文章类别</label>#}
                {{ form.category }}
{#                <select class="form-control" id="exampleFormControlSelect1" required name="category">#}
{#                    <option>1</option>#}
{#                    <option>2</option>#}
{#                    <option>3</option>#}
{#                    <option>4</option>#}
{#                    <option>5</option>#}
{#                </select>#}
                {% for error in form.category.errors %}
                <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
            </div>
            {#              <div class="form-group">#}
            {#                <label for="bloglabel">文章标签</label>#}
            {#                <div id="bloglabel">#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="1" name="bloglabel">#}
            {#                    <label class="form-check-label">【云计算】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="2" name="bloglabel">#}
            {#                    <label class="form-check-label">【大数据】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="3" name="bloglabel">#}
            {#                    <label class="form-check-label">【Java】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="4" name="bloglabel">#}
            {#                    <label class="form-check-label">【C#】</label>#}
            {#                  </div>#}
            {#                  <div class="form-check form-check-inline">#}
            {#                    <input class="form-check-input" type="checkbox" value="5" name="bloglabel">#}
            {#                    <label class="form-check-label">【JavaScript】</label>#}
            {#                  </div>#}
            {#                </div>#}
            {#              </div>#}
            <div class="form-group">
                {{ form.top.label(for="blogfirst") }}
{#                <label for="blogfirst">是否置顶</label>#}
                <div id="blogfirst">
                    {% for item in form.top %}
                        <div class="form-check form-check-inline">
                            {{ item() }}
                            {{ item.label }}
                        </div>
                    {% endfor %}
{#                    <div class="form-check form-check-inline">#}
{#                        <input class="form-check-input" type="radio" name="top" id="inlineRadio1"#}
{#                               value="1">#}
{#                        <label class="form-check-label" for="inlineRadio1">【√ 是】</label>#}
{#                    </div>#}
{#                    <div class="form-check form-check-inline">#}
{#                        <input class="form-check-input" type="radio" name="top" id="inlineRadio2"#}
{#                               value="2" checked>#}
{#                        <label class="form-check-label" for="inlineRadio2">【× 否】</label>#}
{#                    </div>#}
                {% for error in form.top.errors %}
                <span style="color: red;">[{{ error }}]</span>
                {% endfor %}
                </div>
            </div>
            <div id="layout">
                <h5 style="margin-top: 20px">文章内容</h5>
                <div id="my-editormd" class="editormd">
{#                  <textarea style="display:none;"></textarea>#}
                    {{ form.content(style="display:none;") }}
                </div>
            </div>
        </div>
    </form>
{% endblock %}
{% block js %}
    <script src="{{ url_for('static', filename='backend/lib/editmd/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='backend/lib/editmd/editormd.js') }}"></script>
    <script type="text/javascript">
        var myEditor;
        $(function () {
            myEditor = editormd("my-editormd", {
                // width   : "100%", 不要添加
                height: 740,
                //syncScrolling : "single",
                path: "{{ url_for('static', filename='backend/lib/editmd/') }}",
                //theme : "dark", //设置主题
                //previewTheme : "dark",
                //editorTheme : "pastel-on-dark",
                //markdown : md,
                toolbarIcons: function () { //工具栏设置
                    var full = editormd.toolbarModes["full"];
                    for (i = 0; i < full.length; i++) {
                        //去除工具栏的全屏功能
                        if (full[i] === "fullscreen") {
                            full.splice(i, 1);
                        }
                        //去除工具栏的表情符
                        if (full[i] === "emoji") {
                            full.splice(i, 1);
                        }
                        //去除工具栏的HTML实体符号
                        if (full[i] === "html-entities") {
                            full.splice(i, 1);
                        }
                        //去除工具栏的帮助功能
                        if (full[i] === "help") {
                            full.splice(i, 1);
                        }
                    }
                    return full; // full, simple, mini
                },
                codeFold: true,
                //syncScrolling : false,
                saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
                searchReplace: true,
                watch : false,                // 关闭实时预览
                htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
                //toolbar  : false,             //关闭工具栏
                //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                emoji: true,
                taskList: true,
                tocm: true,         // Using [TOCM]
                tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,             // 开启流程图支持，默认关闭
                sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                //imageUpload : false,        //图片上传功能
                //imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                //imageUploadURL : "./php/upload.php",
                onload: function () {
                    console.log('onload', this);
                }
            });
        });
    </script>
    <script type="text/javascript">
        $(function(){
           function upload_cover(){
            var cover = new FormData();
            var fileObj = document.getElementById('cover').files[0];
            cover.append('cover', fileObj)
            $.ajax({
                type: 'post',
                url: "{{ url_for('admin.admin_img_up') }}",
                data: cover,
                async: false,
                processData: false,
                contentType: false,
                success: function (data, status) {
                        if (data === ''){
                            alert('上传封面失败');
                        } else{
                            var cover_url = data['url'];
                        }
                    },
                });
            }
        });
    </script>
{% endblock %}